<template>
  <el-header class="header-container">
    <div class="left-content">
      <el-icon :size="28" class="logo-icon">
        <Film />
      </el-icon>
      <span class="logo-text">XX影院</span>
    </div>

    <div class="right-content">
      <el-menu
        mode="horizontal"
        :default-active="activeIndex"
        class="nav-menu"
        router
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/movie">电影</el-menu-item>
        <el-menu-item index="/anime">动漫</el-menu-item>
        <el-menu-item index="/drama">电视剧</el-menu-item>
        <el-menu-item index="/variety">综艺</el-menu-item>
      </el-menu>

      <el-dropdown class="user-area">
        <el-icon :size="22"><User /></el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>登录/注册</el-dropdown-item>
            <el-dropdown-item divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { Film, User } from '@element-plus/icons-vue'
import { ref } from 'vue'

const activeIndex = ref('/')
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 60px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.left-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  color: #409eff;
}

.logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.right-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-menu {
  border-bottom: none;
  gap: 20px;
}

.nav-menu :deep(.el-menu-item) {
  font-size: 16px;
  color: #666;
  height: 58px;
}

.nav-menu :deep(.el-menu-item.is-active) {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.user-area {
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s;
}

.user-area:hover {
  background: #f5f5f5;
  border-radius: 50%;
}
</style>
